<template>
    <ex-dialog width="1000px" class="ex-diolog" title="分类导航" :visible="visible" @closeDialog="handleClose">
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="180px" class="demo-ruleForm">
        <div>
          <div class="showTypeBox">
            <el-switch
              v-model="showType"
              active-value="1"
              inactive-value="2"
              active-text="显示"
              inactive-text="隐藏"
              @change="changeShowType"
              >
            </el-switch>
          </div>
          <div class="bannerBox" v-for="(item, index) in ruleForm.navigationList" :key="200 + index">
            <div class="imgBox">
              <el-form-item :label="`上传图片${index+1}`" :prop="`navigationList.${index}.img`" :rules="rules.img" ref="imgRef">
                <ImageUploadMore :limit="1" :fileSize="20" @successImg="(e) => { getBannerImg(e, index) }"
                  :value="item.img">
                </ImageUploadMore>
              </el-form-item>
              <el-form-item label="标题:" :prop="`navigationList.${index}.title`" :rules="rules.title">
                <el-input type="text" v-model="item.title" autocomplete="off" placeholder="请填写标题"></el-input>
              </el-form-item>
              <el-form-item label="链接:" :prop="`navigationList.${index}.type`" :rules="rules.type">
                <el-radio-group v-model="item.type">
                  <el-radio label="1">跳转链接</el-radio>
                  <el-radio label="2">商品标签</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="跳转链接:" :prop="`navigationList.${index}.linkUrl`" :rules="rules.linkUrl" v-if="item.type == 1">
                <el-input type="text" v-model="item.linkUrl" autocomplete="off" placeholder="请复制链接地址"></el-input>
              </el-form-item>
              <el-form-item label="选择标签" :prop="`navigationList.${index}.tagIds`" :rules="rules.tagIds" v-if="item.type == 2">
                <el-select v-model="item.tagIds" placeholder="请选择" size="small" filterable multiple>
                  <el-option v-for="(aitem, aindex) in tagList" :key="aindex" :label="aitem.name"
                    :value="aitem.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="rig_btn_box">
              <el-button type="primary" circle icon="el-icon-arrow-up" @click="upGo(index)" v-if="index != 0"></el-button>
              <el-button type="primary" circle icon="el-icon-arrow-down" @click="downGo(index)"
                v-if="index != ruleForm.navigationList.length - 1"></el-button>
            </div>
          </div>
        </div>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')" :loading="loading">确认</el-button>
          <el-button @click="handleClose('ruleForm')">取消</el-button>
        </el-form-item>
      </el-form>
    </ex-dialog>
  </template>
  <script>
  // components
  import Loading from '@/components/Loading/index'
  // api
  import {
    navigation,
    navigationList,
    tagList,
    getShowType,
    saveShowType
  } from '@/api/incentiveManagement/dyConfig'
  
  export default {
    components: {
      Loading
    },
    props: {
      visible: Boolean,
      id: String,
      pathType: String,
    },
    data() {
  
      return {
        title: '新增轮播图',
        loading: false,
        tagList: [],
        showType: 1,//导航栏展示类型 1 展示 2 隐藏
        ruleForm: {
          navigationList: [
            // {
            //   title: '',//标题
            //   img: '',//图片
            //   linkUrl: '',//链接地址
            //   tagIds: '',//	标签Id列表
            //   type: '1',//链接类型（1 跳转链接 2 商品标签）
            // },
            // {
            //   title: '',//标题
            //   img: '',//图片
            //   linkUrl: '',//链接地址
            //   tagIds: '',//	标签Id列表
            //   type: '1',//链接类型（1 跳转链接 2 商品标签）
            // },
            // {
            //   title: '',//标题
            //   img: '',//图片
            //   linkUrl: '',//链接地址
            //   tagIds: '',//	标签Id列表
            //   type: '1',//链接类型（1 跳转链接 2 商品标签）
            // },
            // {
            //   title: '',//标题
            //   img: '',//图片
            //   linkUrl: '',//链接地址
            //   tagIds: '',//	标签Id列表
            //   type: '1',//链接类型（1 跳转链接 2 商品标签）
            // },
          ],
        },
        rules: {
          title: [
            { required: true, message: '请填写标题', trigger: 'blur' }
          ],
          type: [
            { required: true, message: '请选择', trigger: 'change' }
          ],
          img: [
            { required: true, message: '请上传图片', trigger: 'change' }
          ],
          linkUrl: [
            { required: true, message: '请复制链接地址', trigger: 'blur' }
          ],
          tagIds: [
            { required: true, message: '请选择', trigger: 'change' }
          ],
        }
      }
    },
    computed: {
  
    },
    created() {
      this.ruleForm.id = this.id
      this.getTagList()
      this.getDatail()
      this.getShowType()
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      init() {
        this.ruleForm.punchActivityId = ''//打卡活动id
        this.ruleForm.sort = ''
      },
      //获取展示轮播图或者背景图  1 轮播图 2 背景图
      getTagList() {
        tagList().then((res) => {
          this.tagList = res.result
       
        });
      },
      getShowType() {
        getShowType().then((res) => {
          this.showType = res.result.showType
        });
      },
      //获取轮播图详情
      getDatail() {
        navigationList().then(res => {
          this.ruleForm.navigationList = res.result
          
        })
      },
      /** logo */
      getImg(e) {
        this.ruleForm.img = e
        this.$refs['imgRef'].clearValidate();
      },
      //新建
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.loading = true
            var data = {
              ...this.ruleForm
            }
            navigation(data).then(res => {
              setTimeout(() => {
                this.$message.success('修改成功')
                this.handleClose()
                this.$emit('success')
                this.loading = false
              }, 1000);
            }).catch(() => {
              this.loading = false
            }).finally(() => {
  
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      changeShowType(e){
        var data = {
          showType: this.showType
        }
        saveShowType(data).then((res) => {
          this.$message.success('修改成功')
        });
      },
      //取消
      handleClose(formName) {
        this.$emit('update:visible', false)
        // this.$refs[formName].resetFields();
      },
      //确认
      handleConfirm() {
        this.$emit('success', '你好')
      },
      handleSuccess(msg) {
        if (msg === '已拒绝') {
          var type = 'error'
        } else {
          var type = 'success'
        }
        this.$message({
          message: msg,
          type: type,
          duration: 1500,
          onClose: () => {
            this.handleClose()
            this.$emit('success')
          }
        })
      },
      
      //删除轮播图
      handleDelete(ind) {
        this.ruleForm.navigationList.splice(ind, 1)
      },
      //轮播图广告上传图片
      getBannerImg(e, index) {
        this.ruleForm.navigationList[index].img = e
      },
      //上传图片
      getImg(e) {
        this.ruleForm.img = e
        this.$refs['imgRef'].clearValidate();
      },
      //上移一位
      upGo(index) {
        // console.log('index', index)
        var arr = this.ruleForm.navigationList
        if (index != 0) {
          // console.log(arr.splice(index - 1, 1, arr[index][0]))
          this.ruleForm.navigationList[index] = arr.splice(index - 1, 1, arr[index])[0]
          // console.log('arr', arr)
        } else {
          this.ruleForm.navigationList.push(arr.shift())
        }
      },
      //下移一位
      downGo(index) {
        var arr = this.ruleForm.navigationList
        if (index != arr.length - 1) {
          this.ruleForm.navigationList[index] = arr.splice(index + 1, 1, arr[index])[0]
        } else {
          this.ruleForm.navigationList.unshift(arr.splice(index, 1)[0])
        }
      }
  
    }
  }
  </script>
  <style lang="scss" scoped>
  .ex-diolog {
    ::v-deep .ex--dialog--footer {
      border: none !important;
      padding: 0 !important;
    }
  
    ::v-deep .ex--dialog--main {
      padding: 10px 20px !important;
    }
  }
  
  ::v-deep .avatar-uploader2 .el-upload {
    width: 100% !important;
  }
  
  .avatar-uploader2 {
    width: 130px;
    height: 130px;
    text-align: center;
    line-height: 130px;
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
  }
  
  .banner_img {
    width: 130px;
    height: 130px;
  }
  .el-select{
    width: 400px;
  }
  .el-input {
    width: 300px;
  }
  
  .lable_l {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0 20px 0;
  
    .left {
      margin-right: 20px;
    }
  }
  
  .bannerBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  
    .rig_btn_box {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      width: 100px;
      height: 200px;
  
      .el-button {
        margin: 0;
      }
    }
  }
  
  .imgBox {
    border: 1px solid #f5f5f5;
    border-radius: 12px;
    padding: 20px;
    width: 800px;
  
    .name {
      font-size: 16px;
      color: #606266;
      margin-bottom: 10px;
      padding-left: 50px;
    }
  }

  .showTypeBox{
    padding: 20px 0;
  }
  </style>